<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <style type="text/css">
        .text-white {
            color: #ffffff !important;
        }

        .aui-grid [class*=aui-col-] {
            padding: 0.75rem 0;
        }

        .red-bg {
            height: 9.2rem
        }

        .aui-bg-info {
            background-color: #E94B41
        }

        .person-img {
            position: absolute;
            z-index: 1;
            top: 0;
            background-color: #E94B41 !important;
            height: 3rem;
            width: 100%;
            margin: .6rem
        }

        .orders {
            position: absolute;
            z-index: 1;
            top: 4.8rem;
            background-color: #fff;
        }

        .aui-list-item-media img {
            height: 3rem;
            width: 3rem;
            border-radius: 50%;
        }

        .aui-list .aui-list-item-media {
            padding: 0
        }

        .aui-media-list .aui-list-item-inner {
            padding-left: .6rem;
        }

        .order-img {
            height: .95rem;
            width: 1rem;
            display: inline-block;
        }

        .order-title {
            height: 2rem;
        }

        .orders {
            padding: 0 .6rem;
            margin: 0 .6rem .6rem .6rem
        }

        .aui-grid {
            width: calc(100% - 1.2rem)
        }

        .aui-row {
            height: 3.65rem;
        }

        .aui-bar {
            height: 2.45rem
        }

        .function-item {
            height: 2.5rem
        }

        .aui-margin-b-15 {
            margin-bottom: 0 !important;
        }

        .aui-list-item {
            border: none !important;
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <div id="app">
        <section class="aui-content" id="user-info">
            <div class="red-bg">
                <img src="../image/index/red-bg.png" alt="">
            </div>
            <div class="aui-list aui-media-list aui-list-noborder aui-bg-info person-img " tapmode @click='toLogin'>
                <div class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner ">
                        <div class="aui-list-item-media" style="width:3rem;">
                            <img :src="avatrl" class="aui-img-round">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text text-white aui-font-size-18">{{nickName}}</div>
                            <div class="aui-list-item-text text-white">
                                <div><i class="aui-iconfont aui-icon-mobile aui-font-size-14"></i>{{phone}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="aui-content aui-grid aui-margin-b-15 orders white-bg-radius">
            <div class="order-title flex-justify-between" tapmode @click="toOrderList">
                <div class="font-14 text-color-3 font-semibold">我的订单</div>
                <div class="flex-align-center">
                    <div class="text-color-9 font-12" style="margin-right:.35rem">查看全部</div>
                    <img class='grey-right' src="../image/common/grey-right.png" alt="">
                </div>
            </div>
            <div class="aui-row flex-align-center">
                <div class="aui-col-xs-3  flex-justify-center">
                    <img class='order-img' src="../image/person/order_wait_pay.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">待付款</div>
                </div>
                <div class="aui-col-xs-3 flex-justify-center">
                    <img class='order-img' src="../image/person/order_wait_take.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">待提货</div>
                </div>
                <div class="aui-col-xs-3 flex-justify-center">
                    <img class='order-img' src="../image/person/order_wait_pay.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">已完成</div>
                </div>
                <div class="aui-col-xs-3 flex-justify-center" tapmode @click='toAfterSales'>
                    <img class='order-img' src="../image/person/order_after.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">退款售后</div>
                </div>
            </div>
        </section>
        <section class="aui-content white-bg-radius" style="margin:11.1rem 0.6rem 0.6rem 0.6rem;">
            <ul class="aui-list aui-list-in aui-margin-b-15">
                <li class="aui-list-item function-item" tapmode @click='toCoupons'>
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-location aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">优惠卷</div>
                    </div>
                </li>
                <li class="aui-list-item function-item" tapmode @click='toShopInfo'>
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-like aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">店铺信息</div>
                    </div>
                </li>
                <li class="aui-list-item function-item" >
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-location aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">客服</div>
                    </div>
                </li>
                <li class="aui-list-item function-item" tapmode @click='toMerChantHome'>
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-like aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">切换身份</div>
                    </div>
                </li>

            </ul>

        </section>

        <footer class="aui-bar aui-bar-tab">
            <div class="aui-bar-tab-item" tapmode @click='toHome'>
                <img class='bottom-seeting-img' src="../image/main/main_home_unchecked.png" alt="">
                <div class="aui-bar-tab-label font-9 text-color-6">首页</div>
            </div>
            <div class="aui-bar-tab-item" tapmode @click='toCart'>
                <img class='bottom-seeting-img' src="../image/main/main_cart_unchecked.png" alt="">
                <div class="aui-bar-tab-label font-9 text-color-6">购物车</div>
            </div>
            <div class="aui-bar-tab-item aui-active">
                <img class='bottom-seeting-img' src="../image/main/main_person_checked.png" alt="">
                <div class="aui-bar-tab-label font-9 red-text">我的</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
    var vm = new Vue({
        el: '#app',
        data: {
          avatrl:'../image/demo1.png',
          nickName:'登录/注册',
          phone: '***********'
        },
        methods: {
          toLogin:function(){
            api.openWin({
                name: 'login-mobile',
                url: './login/login-mobile.html',
                pageParam: {
                    name: 'test'
                }
            });

          },
            toCart: function() {
              api.openFrame({
                  name: 'main-cart_win',
                  url: './main-cart_win.html',
                  rect: {
                      x: 0,
                      y: 0,
                      w: $api.winWidth,
                      h: $api.winHeight
                  },
                  pageParam: {
                      name: 'test'
                  },
                  bounces: true,
                  bgColor: 'rgba(0,0,0,0)',
                  vScrollBarEnabled: true,
                  hScrollBarEnabled: true
              })
            },
            toHome: function() {
              api.openFrame({
                  name: 'index_win',
                  url: './index_win.html',
                  rect: {
                      x: 0,
                      y: 0,
                      w: $api.winWidth,
                      h: $api.winHeight
                  },
                  pageParam: {
                      name: 'test'
                  },
                  bounces: true,
                  bgColor: 'rgba(0,0,0,0)',
                  vScrollBarEnabled: true,
                  hScrollBarEnabled: true
              })
            },
            toOrderList: function() {
              api.openWin({
                name: 'order-list_win',
                url: './order-list_win.html',
                  pageParam: {
                      name: 'test'
                  }
              });
            },
            toShopInfo: function() {
              api.openWin({
                name: 'shop-info_win',
                url: './shop-info_win.html',
                  pageParam: {
                      name: 'test'
                  }
              });
            },
            toAfterSales:function(){
              api.openWin({
                  name: 'after-sales-list_win',
                  url: 'after-sales-list_win.html',
                  pageParam: {
                      name: 'test'
                  }
              });

            },
            toMerChantHome: function() {
              api.openWin({
                name: 'merchant-home_win',
                url: './merchant/merchant-home_win.html',
                  pageParam: {
                      name: 'test'
                  }
              });
            },
            toCoupons:function(){
              api.openWin({
                  name: 'coupons-list_win',
                  url: './coupons-list_win.html',
                  pageParam: {
                      name: 'test'
                  }
              });

            }
        },
    });

    apiready = function() {

    }
</script>

</html>
